<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file ="../include/base.jsp"%>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css"  href="<%=basePath %>css/bootstrap.min.css"/>
	<title>凯胜项目管理系统</title>
	<style type="text/css">
		body{
			padding-top:50px;
		}
		.mywell{
			margin-top:25px;
		}
	</style>
</head>
<body class="body">
	<%@ include file = "../include/sametop.jsp" %>
	<div class="container">
		<div class="row">
			<jsp:include page="../include/sameleft.jsp">
			<jsp:param value="contact" name="tag"/>
		</jsp:include>
			<div class="span6"  style="margin-bottom:0px;border-radius: 3px 3px 0 0;margin-top:10px">
				 <ul class="breadcrumb" style="margin-bottom:0px;border-radius: 3px 3px 0 0;margin-top:15px">
					<li class="active" style="margin-top:5px"><i class="icon-th"></i>显示联系人</a></li>
					<li style="float:right;margin-top:0px">
						<div class="btn-group" style="float:right;border-radius: 8px 8px 8px 8px;">搜索：
							<select style="border-radius: 8px 8px 8px 8px;width:160px;height:25px" id="myselect">
									<option value="companyAndPerson">显示公司和用户</option>
									<option value="company">仅显示公司</option>
									<option value="person">仅显示用户</option>
							  </select>
						</div>
					</li>
				</ul>
				<div class="wall " style="margin-bottom:0px;border-radius: 3px 3px 0 0;margin-top:0px;border:1px  solid #dddddd">
					<div style="margin-left:20px;margin-top:10px;border:1px  solid #dddddd;width:400px;height:26px;border-radius: 8px 8px 8px 8px;text-align:center;background-color:darkgray">
						<span><input id="mytagbtn" type="button" value="添加标签"/></span>
						<span style="margin-left:10px"><input id="mydel" type="button" value="删除"/></span>
						<span style="margin-left:10px"><input type="button" value="选择全部" id="all"/></span>
						<span style="margin-left:10px"><input type="button" value="取消选择" id="allno"/></span>

					</div>
					<div class = "modal hide " id="mymodal"  style="width:300px;position:absolute;z-index:1;margin-left:20px">
						<div class = "modal-header">
							<input type="button" value="x" style = 'color:black' id="mydel2"  class = "close" data-dismiss = "modal"/>
							<h3>删除联系人</h3>
						</div>
						<div class = "modal-body" style = "text-align:center;height:20px;margin-top:10px">
							<div >你确定要删除联系人 ?</div>		
						</div>
						<div class = "modal-footer" >
							<a href="<%=basePath%>contact/delContact.action?id=${contact.id}" class = "btn btn-primary"   >是</a>
							<a href="" class = "btn" data-dismiss = "modal" >否</a>
						</div>
					</div>	
					<div style="margin-left:20px;margin-top:20px;width:400px;height:30px;background-color:darkgray;border-radius: 3px 3px 0 0;text-align:center;display:none" id="tag">
						<form action="<%=basePath%>contact/saveTag1.action" method="post" id="myform">
							<input style="margin-left:10px;" type="text" name="addtag" value="请输入标签名">
							<input type="hidden" name="myall" class="myall" value="all">
							<input id="mysubtag" style="margin-bottom:4px;margin-left:10px;" type="submit" value="添加标签">
							<input type="hidden" class="singlecheck" name="singlecheck" value="s">	
						</form>
					</div>
					<div id="mydiv" style="margin-bottom:10px">
						<c:forEach items="${contactlist.result }" var="contact">
							<c:choose>
								<c:when test="${contact.type=='person'}">			
									<div class="row" style="border-radius: 3px 3px 0 0">
										<div class="span1" style="margin-top:30px;margin-left:50px">
											<input class="mycheck" type="checkbox" name="son" value="${contact.id}" id="true">		
										</div>					
										 <div class="span1">
											<div style="margin-top:30px;border:1px  solid #dddddd;width:60px">
												<img  src="<%=basePath %>img/3.png" />
											</div>
										</div>
										 <div class="span3">
											<div style="width:200px;border-left:none;word-wrap:break-word;margin-top:20px">
												<div style="margin-left:5px;margin-right:10px;color:darkgray"><span style="font-size:18px"><strong><a href="<%=basePath%>contact/singlecontact.action?id=${contact.id}">${contact.name}</a></strong></span></div>
												<div style="margin-left:3px;margin-top:3px"><span style="margin-left:5px;text-decoration:underline;color:grey;margin-right:3px">${contact.title}</span>在<span style="margin-left:5px;text-decoration:underline;color:grey">${contact.company}</span></div>
												<div style="margin-left:3px;margin-top:10px">
													<c:forEach items="${contact.tagSet}" var="tag">
														<span style="border-radius: 3px 3px 3px 3px;background-color:skyblue;color:white">${tag.content}</span>
													</c:forEach>
												</div>	
											</div>
										</div>											
									</div> 
									<hr style="width:350px;margin-left:40px">
								</c:when>
								<c:otherwise>		
									<div class="row" style="border-radius: 3px 3px 0 0">
										<div class="span1" style="margin-top:30px;margin-left:50px">
											<input class="mycheck" type="checkbox" name="son"  value="${contact.id}">
										</div>					
										 <div class="span1">
											<div style="margin-top:30px;border:1px  solid #dddddd;width:60px">
												<img  src="<%=basePath %>img/20.jpg" />
											</div>
										</div>
										 <div class="span3">
											<div style="width:200px;border-left:none;word-wrap:break-word;margin-top:30px">
												<div style="margin-left:5px;margin-right:10px;color:darkgray"><span style="font-size:18px"><strong><a href="<%=basePath%>contact/singlecontact.action?id=${contact.id}">${contact.name}</a></strong></span></div>
												<div style="margin-left:3px;margin-top:10px">
													<c:forEach items="${contact.tagSet}" var="tag">
														<span style="border-radius: 3px 3px 3px 3px;background-color:skyblue;color:white" >${tag.content}</span>
													</c:forEach>
												</div>	
											</div>
										</div>											
									</div> 
									<hr style="width:350px;margin-left:40px">
								</c:otherwise>	
							</c:choose>	
						</c:forEach>
					</div> 	
				</div> 
			</div>
			<div class="span3">
				<ul class="breadcrumb" style="margin-bottom:0px;border-radius: 3px 3px 0 0;margin-top:24px">
						<li class="active"><i class="icon-th"></i>联系人管理</a></li>
						
				</ul>
				<div style="border:1px  solid #dddddd">
				<div style="margin-top:15px;margin-left:15px">
						<ul style="margin-top:15px">
							<li><a href="<%=basePath%>contact/newcontact.action">添加联系人</a></li>
						</ul>
					</div><hr>
					<div style="margin-top:15px;margin-left:15px">
						批量添加
						<ul style="margin-top:15px">
							<li><a href="<%=basePath%>contact/addmorecontact.action">批量导入</a></li>
							<li><a href="<%=basePath%>contact/addmorecontact.action">批量导出</a></li>
						</ul>
					</div><hr>								
					<div style="margin-top:30px;margin-left:15px">
						使用标签搜索
						<ul style="margin-top:15px">
						<c:forEach items = "${fwtlist}" var = "fwt">
							<li>${fwt.firstWord}
								<c:forEach items = "${fwt.contentlist}" var = "content">
									<a style="margin-left:10px;border-radius: 5px 5px 5px 5px;background-color:grey;color:white;pointer:curson" class="mytag" href="javaScript:;">
										${content}
									</a>
								</c:forEach>
							</li><hr>
						</c:forEach>
						</ul>
					</div>
				</div>
			</div>
	</div>
	
</div>
	<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://lib.sinaapp.com/js/bootstrap/2.0.3/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="<%=basePath %>js/jquery.js"></script>
	<script type="text/javascript">
		 $(document).ready(function(){
		
		 /* 取消选择的标签 */
		 document.getElementById("allno").onclick = function(){
			$("input[name='son']").attr("checked", false);
			$(".myall").attr("value", "no");
		};
		
		/* 选择全部的标签 */
		document.getElementById("all").onclick = function(){
			$("input[name='son']").attr("checked", true);
			$(".myall").attr("value", "all");
			
		};
		
		 //获得被选的人的id
		 $(".mycheck").click(function(){
		 	var result=$(".mycheck").attr("checked");
		 	alert(result);
		 	$(".myall").attr("value", "no");
		 	if(result=="checked"){
		 		var v=$(this).val();
		 		//alert(v);
		 		$(".singlecheck").attr("value", "single");
		 		$("#myform").append($("<input type='hidden' class='mecheck' name='mecheck' value="+v+">"));
		 	}
			});
		 
		/* 删除框的显示与隐藏 */
		 $("#mydel").click(function(){
				$("#mymodal").show("slow");
			}); 
			
		$("#mydel2").click(function(){
			$("#mymodal").hide();
		}); 
		
		 
		 /* 标签框的显示与隐藏 */
		 $("#mytagbtn").click(function(){
				$("#tag").show();
			});
		 $("#mysubtag").click(function(){
				$("#tag").hide();
			});
		 
		 /* 根据所点击的标签进行搜索 */
			 $(".mytag").click(function(){
			 	 var s=$(this).html();
			 	// alert(s);
			 	$.get("<%=basePath %>contact/enter.action?tag="+s,function(data){
			 		$("#mydiv").empty();
			 		var ar=data.result;
			 		for(var i=0;i<ar.length;i++){
				 		if(ar[i].contact.type=="person"){
				 			//alert(ar[i].id);
				 			//alert("这是联系人");
				 			//alert(ar[i].contact.name);
				 			
				 			<%-- var div=document.createElement("<div class='row' style='border-radius: 3px 3px 0 0'></div>");
				 			var img=document.createAttribute("<img  src='<%=basePath %>img/3.png' />");
				 			div.appendChild(img);
				 			document.getElementById("mydiv").appendChild(div); --%>
				 			$("#mydiv").append($(" <div class='row' style='border-radius: 3px 3px 0 0'><div class='span1' style='margin-top:30px;margin-left:50px'><input type='checkbox' ></div><div class='span1'><div style='margin-top:30px;border:1px  solid #dddddd;width:60px'><img  src='<%=basePath %>img/3.png' /></div></div><div class='span3'><div style='width:200px;border-left:none;word-wrap:break-word;margin-top:20px'><div style='margin-left:5px;margin-right:10px;color:darkgray'><span style='font-size:18px'><strong><a href='<%=basePath%>contact/singlecontact.action?id="+ar[i].id+"'>"+ar[i].contact.name+"</a></strong></span></div><div style='margin-left:3px;margin-top:3px'><span style='margin-left:5px;text-decoration:underline;color:grey;margin-right:3px'>"+ar[i].contact.title+"</span>在<span style='margin-left:5px;text-decoration:underline;color:grey'>"+ar[i].contact.company+"</span></div><div id='my' style='margin-left:3px;margin-top:10px'></div></div></div></div><hr style='width:350px;margin-left:40px'>"));
				 			//alert(ar[i].contact.tagSet.length);
							var val=ar[i].contact.tagSet;
							//循环出标签
				 			 for(var m=0;m<val.length;m++){
				 				//alert(val[m].content);
				 				if(!val[m].empty){
				 					$("#my").append("<span style='border-radius: 3px 3px 3px 3px;background-color:skyblue;color:white;margin-left:10px' >"+val[m].content+"</span>");
				 				};
				 			} ;
				 		}else{
				 			$("#mydiv").append($(" <div class='row' style='border-radius: 3px 3px 0 0'><div class='span1' style='margin-top:30px;margin-left:50px'><input type='checkbox' ></div><div class='span1'><div style='margin-top:30px;border:1px  solid #dddddd;width:60px'><img  src='<%=basePath %>img/20.jpg' /></div></div><div class='span3'><div style='width:200px;border-left:none;word-wrap:break-word;margin-top:40px'><div style='margin-left:5px;margin-right:10px;margin-top:20px;color:darkgray'><span style='font-size:18px'><strong><a href='<%=basePath%>contact/singlecontact.action?id="+ar[i].id+"'>"+ar[i].contact.name+"</a></strong></span></div></div>"));
							var val=ar[i].contact.tagSet;
				 			for(var m=0;m<val.length;m++){
				 				//alert(val[m].content);
				 				if(!val[m].empty){
				 					$("#my").append("<span style='border-radius: 3px 3px 3px 3px;background-color:skyblue;color:white;margin-left:10px' >"+val[m].content+"</span>");
				 				};
				 			}; 
				 		};
					};
				});
			});
		 });
		 
		 
		/*  根据搜索框进行搜索 */
		document.getElementById("myselect").onchange=function(){
		 var v=$("#myselect").val();
		// alert(v);
		 $.get("<%=basePath %>contact/sousuo.action?sousuo="+v,function(data){
			 		$("#mydiv").empty();
			 		
			 		var a=data.result;
					//alert(a.length);
					//alert(v);
					for(var i=0;i<a.length;i++){
						//alert(a[i].type);
						if(a[i].type=="person"){
							//alert(a[i].id);
							$("#mydiv").append($(" <div class='row' style='border-radius: 3px 3px 0 0'><div class='span1' style='margin-top:20px;margin-left:50px;margin-bottom:10px'><input type='checkbox' ></div><div class='span1'><div style='margin-top:30px;border:1px  solid #dddddd;width:60px'><img  src='<%=basePath %>img/3.png' /></div></div><div class='span3'><div style='width:200px;border-left:none;word-wrap:break-word;margin-top:20px'><div style='margin-left:5px;margin-right:10px;color:darkgray'><span style='font-size:18px'><strong><a href='<%=basePath%>contact/singlecontact.action?id="+a[i].id+"'>"+a[i].name+"</a></strong></span></div><div style='margin-left:3px;margin-top:3px'><span style='margin-left:5px;text-decoration:underline;color:grey;margin-right:3px'>"+a[i].title+"</span>在<span style='margin-left:5px;text-decoration:underline;color:grey'>"+a[i].company+"</span></div><div class='my' style='margin-left:3px;margin-top:10px'></div></div></div></div><hr style='width:350px;margin-left:40px'>"));
							var val=a[i].tagSet;
							//循环出标签
				 			 for(var m=0;m<val.length;m++){
				 				//alert(val[m].content);
				 				//$(".my").empty();
				 				//为何不能用变化的id
				 				//$("#my[i]").append("<span style='border-radius: 3px 3px 3px 3px;background-color:skyblue;color:white;margin-left:10px' >"+val[m].content+"</span>");
				 				$(".my").append("<span style='border-radius: 3px 3px 3px 3px;background-color:skyblue;color:white;margin-left:10px' >"+val[m].content+"</span>");
				 			}; 
				 			$(".my").attr("class","me");
						}else if(a[i].type=="company"){
							//alert(a[i].id);
							$("#mydiv").append($(" <div class='row' style='border-radius: 3px 3px 0 0'><div class='span1' style='margin-top:30px;margin-left:50px'><input type='checkbox' ></div><div class='span1'><div style='margin-top:30px;border:1px  solid #dddddd;width:60px'><img  src='<%=basePath %>img/20.jpg' /></div></div><div class='span3'><div style='width:200px;border-left:none;word-wrap:break-word;margin-top:20px'><div style='margin-left:5px;margin-right:10px;color:darkgray'><span style='font-size:18px'><strong><a href='<%=basePath%>contact/singlecontact.action?id="+a[i].id+"'>"+a[i].name+"</a></strong></span><div class='my' style='margin-left:0px;margin-top:30px'></div></div></div></div><hr style='width:350px;margin-left:60px;;margin-top:80px'>"));
							var val=a[i].tagSet;
							//alert(val.length);
							//循环出标签
				 			 for(var m=0;m<val.length;m++){
				 				//alert(val[m].content);
				 				$(".my").append("<span style='border-radius: 3px 3px 3px 3px;background-color:skyblue;color:white;margin-left:10px' >"+val[m].content+"</span>");
				 			};
				 			$(".my").attr("class","me"); 
						};
					};
				}); 
		};
	
		
		
		
		
	</script>
</body>
</html>